<template>
  <div>
    <h3>我是二级菜单-用户列表文件</h3>
    <!-- 面包写 导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图 -->
    <el-card class="card">
      <el-row :gutter="20">
        <el-col :span="8">
          <!-- 栅格系统 绘制搜索款的大小 -->
          <!-- 搜索框按钮添加查询数据的事件 双向绑定  再添加清空按钮数据清空  clearable   @clear单机事件 清空所以，数据正常全部显示 -->
          <el-input
            placeholder="请输入内容"
            v-model="queryInfo.query"
            clearable
            @clear="getUserList"
          >
            <!-- 按钮绑定单机的事件，点击调用  getUserList  函数 -->
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="getUserList"
            ></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="success" @click="addDialogVisible = true"
            >添加用户</el-button
          >
        </el-col>
      </el-row>

      <!-- 用户列表区域 -->
      <el-table :data="userlist" border stripe>
        <!--表单前面添加索引 1-2-3-4     -->
        <el-table-column type="index"></el-table-column>
        <!-- userlist 后台请求到的数据  ：data  保存进表单 -->
        <el-table-column label="姓名" prop="username"></el-table-column>
        <el-table-column label="邮箱" prop="email"></el-table-column>
        <el-table-column label="电话" prop="mobile"></el-table-column>
        <el-table-column label="职位" prop="role_name"></el-table-column>

        <!--  指定了插槽   就不需要 prop="mg_state" -->
        <el-table-column label="状态">
          <!-- 作用域插槽 接收scope  通过scope.row  接受了对应这一行的数据显示-->
          <!-- 子组件可以在slot标签上绑定属性值，在父组件可以拿到子组件的数据，通过子组件绑定数据传递给父组件 -->
          <template slot-scope="scope">
            <!-- scope.row ：-->
            <!-- {{ scope.row }} -->
            <!-- 监听switch 改变 就保存改变的 -->
            <el-switch
              v-model="scope.row.mg_state"
              @change="userStateChanged(scope.row)"
            ></el-switch>
          </template>
          <!-- slot-scope="scope" -->
        </el-table-column>

        <el-table-column label="操作" width="180px">
          <!-- 作用域插槽 接收scope  通过scope.row  接受了对应这一行的数据显示-->
          <template slot-scope="scope">
            <!-- 修改按钮 -->
            <!-- 操作按钮里面的  修改按钮 添加事件=========== -->
            <el-button
              type="success"
              icon="el-icon-edit"
              size="mini"
              @click="showEditDialog(scope.row.id)"
            ></el-button>

            <!-- 删除按钮 -->
            <!-- 操作按钮里面的  删除按钮 添加事件=========== -->

            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="removeUserById(scope.row.id)"
            ></el-button>

            <!-- 分配角色 -->
            <!--      ====颜色         悬停显示文字        显示位置在上面    失去鼠标消失-->
            <el-tooltip
              effect="dark"
              content="分配角色"
              placement="top"
              :enterable="false"
            >
              <el-button
                type="warning"
                icon="el-icon-setting"
                size="mini"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页显示区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>

    <!--   -->

    <!-- 添加用户====的对话框的信息 -->
    <!--  @close=“”  关闭对话框的点击事件 -->
    <el-dialog
      title="提示"
      :visible.sync="addDialogVisible"
      width="50%"
      @close="addDialogClosed"
    >
      <!-- 内容主题区域 -->
      <el-form
        :model="addForm"
        :rules="addFormRules"
        ref="addFormRef"
        label-width="70px"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="addForm.username"> </el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="addForm.password"> </el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="addForm.email"> </el-input>
        </el-form-item>
        <el-form-item label="手机" prop="mobile">
          <el-input v-model="addForm.mobile"> </el-input>
        </el-form-item>
      </el-form>

      <!-- 底部区域 -->

      <!-- 一开始就是隐藏的 为false  ，通过给添加用户按钮添加单机事件 为true  就是显示  true -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>

        <el-button type="primary" @click="addUser"> 确 定 </el-button>
      </span>
    </el-dialog>

    <!-- 修改用户====的对话框的信息 -->
    <!-- 对话框弹出信息的  按钮信息重置 -->
    <el-dialog
      title="修改用户"
      :visible.sync="editDialogVisible"
      width="50%"
      @close="editDialogClosed"
    >
      <!-- 用户端对话画框的弹出内容 -->
      <el-form
        :model="editForm"
        :rules="editFormRules"
        ref="editFormRef"
        label-width="70px"
      >
        <!-- disabled 表示禁用   -->
        <el-form-item label="用户名">
          <el-input v-model="editForm.username" disabled></el-input>
        </el-form-item>

        <!-- prop 验证 -->
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="editForm.email"></el-input>
        </el-form-item>

        <el-form-item label="手机" prop="mobile">
          <el-input v-model="editForm.mobile"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editUserInfo">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    // 邮箱验证规则
    var checkEmail = (rule, value, cb) => {
      // 验证邮箱的正则表达式
      const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/

      if (regEmail.test(value)) {
        return cb()
      }

      cb(new Error('请输入合法的邮箱信息'))
    }

    // 手机号验证规则
    var checkMobile = (rule, value, cb) => {
      // 验证手机号的正则表达式
      const regMobile =
        /^(0|86|17951)?(13[0-9]|15[0123456789]|17[678]|18[0-9]|14[57])[0-9]{8}$/

      if (regMobile.test(value)) {
        return cb()
      }

      cb(new Error('请输入合法的手机号码'))
    }

    return {
      // 获取用户列表====保存到data里面 对象形式保存-参数对象
      queryInfo: {
        query: '',
        // 当前显示页数
        pagenum: 1,
        // 当前每页显示多少条数据
        pagesize: 2
      },
      // 第六步666666666
      // 保存获取到   用户的列表
      userlist: [],
      // 总数的条数
      total: 0,

      // 控制对话框的显示隐藏
      addDialogVisible: false,

      //
      // 添加用户的表单数据
      //
      addForm: {
        username: '',
        password: '',
        email: '',
        mobile: ''
      },
      // 添加验证表单的验证规则
      addFormRules: {
        username: [
          // 失去焦点 验证 ：  trigger: 'blur'
          { required: true, message: '请添加用户名', trigger: 'blur' },
          {
            min: 3,
            max: 10,
            message: '添加用户名在3 到 10 个字符',
            trigger: 'blur'
          }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            min: 6,
            max: 15,
            message: '添加密码在6 到 15 个字符',
            trigger: 'blur'
          }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { validator: checkEmail, trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { validator: checkMobile, trigger: 'blur' }
        ]
      },

      // 控制修改用户的对话框的显示隐藏
      editDialogVisible: false,

      // 定义私有的对象 用来保存查询到用户信息
      editForm: {},
      // 修改表单验证的规则对象
      editFormRules: {
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { validator: checkEmail, trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { validator: checkMobile, trigger: 'blur' }
        ]
      }
    }
  },

  created() {
    // 页面创建期间---调用  this.getUserList()---发起ajax请求
    // 第一步111111111111111首屏数据请求，getuserlist
    this.getUserList()
  },

  // 事件处理函数  方法
  methods: {
    // 第二步222222222222222执行的函数方法，定义
    async getUserList() {
      // 第三步3333333333333333发起ajax请求通过this调用加扣文档http  get请求地址users，一些参数路由传参params: {}    参数定义到  data  中

      // 第四步44444444444出现了primise 对象  简化 用await async
      const { data: result } = await this.$http.get('users', {
        params: this.queryInfo
      })

      // 第五步5555555555通过判断请求回来  meta下的status码 正确的 200，不等于就是错误的。。。。。。。。。。。
      if (result.meta.status !== 200) {
        return this.$message.error('获取用户失败了！行不行啊喂')
      }

      // 把后台接口文件数据 users的数据-----》赋值给  自定义的  userslist
      // 第七步77777777777  开始赋值
      this.userlist = result.data.users
      this.total = result.data.total

      console.log(result)
    },

    //
    // 页码的梳理，pagesize的改变事件
    handleSizeChange(newSize) {
      console.log(newSize)
      // 请求到的数据 赋值给形参，然后调用函数  this.getUserList()
      this.queryInfo.pagesize = newSize
      this.getUserList()
    },

    // 页码值的改变,newPage的改变事件
    handleCurrentChange(newPage) {
      console.log(newPage)
      // 请求到的数据 赋值给形参，然后调用函数  this.getUserList()
      this.queryInfo.pagenum = newPage
      this.getUserList()
    },

    // 监听switch开关状态的改变
    async userStateChanged(userinfo) {
      // 页面是scope.row 实参  。  userinfo 形参
      console.log(userinfo)
      // put修改的意思, :  表示动态的数据 用  ` `
      const { data: result } = await this.$http.put(
        // ``  定义多行字符串，或者在字符串中嵌入变量。
        `users/${userinfo.id}/state/${userinfo.mg_state}`
      )
      if (result.meta.status !== 200) {
        // 如果操作失败，数据库没有改变，那么就重新回到原来的状态。 =====取反
        userinfo.mg_state = !userinfo.mg_state
        return this.$message.error('更新用户状态失败')
      }
      this.$message.success('更新用户状态成功')
    },

    //
    // 监听添加用户对话框的关闭事件

    // 对该表单项进行重置函数的调用  resetFields()，将其值重置为初始值并移除校验结果
    addDialogClosed() {
      this.$refs.addFormRef.resetFields()
    },

    //
    // 修改按钮=======点击按钮 =====添加用户======
    addUser() {
      // 表单进行校验的方法，          参数为一个回调函
      this.$refs.addFormRef.validate(async (valid) => {
        console.log(valid)
        // 判断时候为valid的值，取反
        if (!valid) return
        // 可以发起添加用户的网络请求
        // 简化  primise  （ await   async）
        const { data: result } = await this.$http.post('users', this.addForm)

        if (result.meta.status !== 201) {
          this.$message.error('添加用户失败')
        }
        this.$message.success('添加用户成功')
        // 添加用户的对话框；
        this.addDialogVisible = false
        // 用户添加更新成功以后 重新调用函数 getUserList()，重新刷新数据列表；
        this.getUserList()
      })
    },

    // 操作修改按钮的暂时编辑对话框  点击事件 ======
    async showEditDialog(id) {
      // 获取id信息 修改按钮童过插槽的scope.row  拿到整条信息
      console.log(id)

      // id拿到了 通过id  发送请求
      // 通过解构赋值的形式拿到这个数据，在判断
      const { data: result } = await this.$http.get('users/' + id)
      if (result.meta.status !== 200) {
        return this.$message.error('查询用户失败')
      }

      // 开始赋值 把查询到的信息 result.data  赋值保存到了==》 给定义的对象里面 editForm，
      this.editForm = result.data

      // 控制又该按钮的显示
      this.editDialogVisible = true
    },

    // 监听修改对话框的关闭(重置信息)事件
    // resetFields() 重置表单的函数
    editDialogClosed() {
      this.$refs.editFormRef.resetFields()
    },

    //
    // 修改用户======修改信息======= 并且提交
    editUserInfo() {
      // 表单进行校验的方法，参数为一个回调函
      this.$refs.editFormRef.validate(async (vaild) => {
        console.log(vaild)
        // 判断时候为valid的值，取反
        if (!vaild) return
        // 验证成功---发起用户通过的请求
        // 可以发起添加用户的网络请求
        // 简化  primise  （ await   async）
        const { data: result } = await this.$http.put(
          'users/' + this.editForm.id,
          {
            email: this.editForm.email,
            mobile: this.editForm.mobile
          }
        )
        // 判断 如果输入正确
        if (result.meta.status !== 200) {
          this.$message.error('更新添加用户失败')
        }
        // 修改用户信息成功
        this.$message.success('更新添加用户成功')

        // 添加用户的关闭 false对话框；
        this.editDialogVisible = false

        // 用户添加更新成功以后 重新调用函数 getUserList()，重新刷新数据列表；
        this.getUserList()
      })
    },

    //
    // // 删除按钮=======根据id删除信息 =====删除用户======
    async removeUserById(id) {
      // console.log(id) //  500

      // 、询问弹框提示
      const confirmResult = await this.$confirm(
        '此操作将永久删除该用户信息, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(
        (err) => err
        // catch  捕获错误的消息

        // .catch(err => { return err}
        // 箭头函数体内一行代码 可以省略简写
      )

      // 如果用户确认删除， 返回字符串 confirm
      // 如果用户取消了删除 返回字符串concel
      console.log(confirmResult)

      // 判断返回的值  是否为返回的confirm确定 或者为concel取消
      if (confirmResult !== 'confirm') {
        return this.$message.info('已经取消删除')
      }

      // -------------------------------------
      // console.log('确认删除')

      // 确认删除的消息之后开始正式删除用户信息
      // 发送删除用户的接口请求
      // 接收到removeUserById 的 形参(id)
      const { data: result } = await this.$http.delete('users/' + id)

      // 判断得到的值是 200 成功的。
      if (result.meta.status !== 200) {
        return this.$message.error('删除用户失败')
      }
      this.$message.success('删除用户成功')

      this.getUserList()
    }

  }
}
</script>

<style lang="less" scoped>
</style>
